<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: jiaxiaojie
 * @Date: 2023-03-08 19:57:53
 * @LastEditors: jiaxiaojie
 * @LastEditTime: 2023-04-05 22:51:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- fancybox -->
    <title>demo2</title>
    <link rel="stylesheet" href="//qn.uwitkey.com/fontawesome5/css/all.min.css" />

    <style>
        .side-bar {
            position: fixed;
            right: 0;
            top: 30%;
            z-index: 998;
        }

        .bottom-message {
            position: fixed;
            right: 30px;
            bottom: 10%;
            z-index: 998;
        }

        .contact-message {
            position: fixed;
            width: 350px;
            right: 30px;
            /* bottom: -317px; */
            z-index: 998;
            transition: all .5s;
        }

        .ani-message-in {
            animation: ani-message-in .3s .1s ease-out forwards;
        }

        .ani-message-out {
            animation: ani-message-out .3s ease-out forwards;
        }

        @keyframes ani-message-in {
            0% {
                bottom: -317px;
            }

            100% {
                bottom: 0%;
            }
        }

        @keyframes ani-message-out {
            0% {
                bottom: 0%;
            }

            100% {
                bottom: -317px;
            }
        }

        .fade-in {
            animation: ani-in .3s ease-out forwards;
        }

        .fade-out {
            animation: ani-out .3s .1s ease-out forwards;
        }

        @keyframes ani-out {
            0% {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            80% {
                opacity: 1;
                visibility: visible;
            }

            100% {
                opacity: 0;
                visibility: hidden;
                transform: translateY(100px);
            }
        }

        @keyframes ani-in {

            0% {
                opacity: 0;
                visibility: hidden;
                bottom: 0%;
            }

            100% {
                opacity: 1;
                visibility: visible;
                /* transform: translateY(0); */
                bottom: 10%;
            }
        }
    </style>
</head>

<body>
    <!-- 导航 -->
    <div>top</div>
    <div id="banner">1111111</div>
    <!-- 侧面内容 -->
    <div class="side-bar d-none d-sm-block">
        <a class="side1 p-3 d-block bg-danger" href="javascript:;">
            <img class="d-block mx-0" src="./img2/sideIcon1.png" alt="" srcset="">
            <div class="bg-white mx-auto my-2" style="width: 1px;height: 25px;"></div>
            <span class="mx-auto text-white" style="writing-mode: vertical-lr;letter-spacing: 2px;">联系</span>
        </a>
        <a class="side2 side d-flex position-absolute" href="tel:12345">
            <div class="d-flex align-items-center justify-content-center bg-danger" style="width: 50px;">
                <img class="d-block mx-0" src="./img2/sideIcon3.png" alt="" srcset="">
            </div>
            <span class="bg-black flex-fill d-flex align-items-center justify-content-center text-white">15612178955</span>
        </a>
        <a class="side3 side d-flex position-absolute" href="javascript:;">
            <div class="d-flex align-items-center justify-content-center bg-danger " style="width: 50px;">
                <img class="d-block mx-0" src="./img2/sideIcon2.png" alt="" srcset="">
            </div>
            <span class="bg-black  flex-fill d-flex align-items-center justify-content-center text-white">j15032258501@163.com</span>
        </a>
        <a class="side4 side d-flex position-absolute" href="javascript:;">
            <div class="d-flex align-items-center justify-content-center bg-danger" style="width: 50px;">
                <img class="d-block mx-0" src="./img2/slide5.png" alt="" srcset="">
            </div>
            <span class="bg-black flex-fill d-flex align-items-center justify-content-center text-white">15612178955</span>
        </a>
        <a class="side5 side  position-absolute" href="javascript:;" style="z-index: 2;">
            <div class="d-flex side">
                <div class="d-flex align-items-center justify-content-center bg-danger" style="width: 50px;">
                    <img class="d-block mx-0" src="./img2/slide4.png" alt="" srcset="">
                </div>
                <span class="bg-black flex-fill d-flex align-items-center justify-content-center text-white">手机官网</span>
            </div>
            <img class="code" src="./img2/code.jpg" alt="">
        </a>
        <a class="side6 side position-absolute bg-danger d-none align-items-center justify-content-center btn-scroll-top" href="javascript:;" style="width: 50px;">
            <img class="" src="./img2/slide6.png" alt="" srcset="" style="z-index: 1;">
        </a>
    </div>

    <!-- 内容 -->
    <div class="container-fluid pt-10 pt-sm-6r bg-white" style="height: 2000px;">

    </div>

    <style>
        .side2 {
            /* transform: translateX(-100px); */
            top: 151px;
            right: -140px;
            width: 190px;

        }

        .side1 {
            width: 50px;
            height: 150px;
        }

        .side3 {
            right: -225px;
            width: 275px;
            top: 202px;
        }

        .side3 {
            right: -225px;
            width: 275px;
            top: 202px;
        }

        .side4 {
            right: -140px;
            width: 190px;
            top: 253px;
        }

        .side5 {
            right: -90px;
            width: 140px;
            top: 304px;
            cursor: pointer;
        }

        .side6 {
            right: 0;
            width: 140px;
            top: 355px;
            cursor: pointer;
        }

        .side {
            transform: translateX(0);
            transition: all .3s;
            height: 50px;
        }

        .side2:hover {
            transform: translateX(-140px);
        }

        .side3:hover {
            transform: translateX(-225px);
        }

        .side4:hover {
            transform: translateX(-140px);
        }

        .side5:hover {
            transform: translateX(-90px);
        }

        .side5:hover .code {
            visibility: visible;
            opacity: 1;
            top: 50px;
        }

        .code {
            width: 100%;
            position: absolute;
            top: 100px;
            left: 0;
            /* display: none; */
            z-index: 99;
            text-align: center;
            background: #fff;
            border: 1px solid #e5e5e5;
            visibility: hidden;
            opacity: 0;
            transition: all .3s;
        }

        a {
            text-decoration: none;
        }
    </style>

    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-smooth-scroll/2.2.0/jquery.smooth-scroll.min.js" type="application/javascript"></script>

    <script>
        $(() => {


            $(window).scroll(function() {
                let gun = $(document).scrollTop();
                if (gun >= 200) {
                    console.log(1111);
                    // $(".btn-scroll-top").css("display", 'flex')
                    $(".btn-scroll-top").addClass("d-flex")
                    $(".btn-scroll-top").removeClass("d-none")
                } else {
                    // $(".btn-scroll-top").css("display", 'none')
                    $(".btn-scroll-top").addClass("d-none")
                    $(".btn-scroll-top").removeClass("d-flex")

                }

            })

            // 回到顶部
            $('.btn-scroll-top').on('click', function() {
                $.smoothScroll(0);
            });

        })
    </script>
</body>

</html>